●
LIVE DEMO
Generated using
Instruct UI - An AI for Blazor UI Generation
## What's implemented
- Marketing landing page with a prominent hero section, CTA, and gradient background.
- Features grid rendered from a C# collection.
- Embedded iframe demo (YouTube) in a responsive aspect container.
- Pricing cards with featured badge and feature lists.
- FAQ built with HTML <details>/<summary> accordions.
- Sticky navigation and footer with social icons.
## Key components
- Razor fragments and standard HTML elements: <nav>, <section>, <footer>, <iframe>, <details>, <summary>.
- C# models and collections in @code: FeatureItem, PricingPlan, FaqItemModel.
- Loops: @foreach to render feature cards and pricing plans.
- Icons: FontAwesome classes (fa-solid, fa-brands).
- Utility CSS: Tailwind layout classes (grid, flex, container, spacing, rounded, shadow).
## How it works
- Data is provided by in-file C# collections and rendered with @foreach; no external data services are wired.
- Navigation uses anchor links; offsets use Tailwind spacing and scroll-mt-16 utilities to account for the sticky nav.
- The iframe embeds an external demo; interactive elements are standard anchors and details/summary toggles.
- No EditForm or validation constructs are present; state is read-only collections in the component.
## Styling
- Tailwind utility classes control layout, spacing, colors, responsive grid and typography (e.g., grid md:grid-cols-3, container mx-auto, text-4xl).
- FontAwesome icon classes provide visual glyphs; a site-wide Tailwind config or CDN is required for utilities.
- Responsive behavior relies on Tailwind breakpoints (sm, md, lg) and flexible containers; visuals use rounded corners and shadows for cards.
## Reuse steps
1. Add Tailwind CSS to the project (postcss/tailwind build or CDN for prototypes) and include FontAwesome.
2. Place the .razor file in the Pages folder and add a route link to NavMenu if needed.
3. Import namespaces or shared CSS in _Imports.razor and ensure global styles allow smooth scrolling (e.g., html { scroll-behavior: smooth; }).
4. Replace the in-file sample collections with application services or injected data (e.g., IFeatureService, IPricingService).
5. Wire authentication, billing, and API calls (Instagram Graph API, payment provider) in services and call them from the page or a view-model.
6. Add JS interop for advanced mobile menu toggling or more precise scroll behavior if required.
## Limitations & next steps
- This component is a standalone landing page generated by Instruct UI; it does not include back-end services, authentication, or payment integration.
- Accessibility and aria attributes are minimal; keyboard behavior for custom menus may need enhancement.
- Smooth scrolling and mobile menu state require JS interop or additional Blazor state management for full functionality.
- Extend by injecting services for analytics, subscription management, Instagram API integration, and server-side rendering of dynamic content.